<html>
	<head>
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
		<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
		<style>
			html {
				zoom: 90%;
			}
			body {
				background: #e2e1e0;
				text-align: center;
				margin: 0px;
				padding: 0px;
				font-size: 9px;
				color: #555;
				font-family: Roboto;
				text-align: -webkit-center;
				
			}

			table {
				    margin: 10px;
				    position: relative;
				    left: -40px;
			}

			video {
				object-fit: cover;
				float: left;
				background: #fff;
				border-radius: 2px;
				display: inline-block;
				margin: 1rem;
				position: relative;
				width: 420px;
				box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
				transition: all 0.5s cubic-bezier(.25,.8,.25,1);
				padding:1px;
				bottom: 0px;
				height: 315px;
			}
			
			#container {
				top: 10px;
				left: 10px;
				margin: 0px;
				padding: 0px;
				width: 900px;
				
			}
			.container-video {
				width: 50%;
				float: left;
				display: inline-block;
				position: relative;
				font-size: 24px;
				top: 5px;
				margin-bottom: 10px;
			}

			.gaugeChartContainer {
				position: relative;
				width: 190px;
				height: 120px;
				float: left;
				padding: 10px;
			}

			.gaugeChart {
				position: relative;
				text-align: center;
			}

			.gaugeChart canvas {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
			}

			.gaugeChartLabel {
				display: inline-block;
				position: absolute;
				float: left;
				left: 0;
				top: 55px;
				width: 100%;
				text-align: center;
				color: #FFFFFF;
				font-size: 24px;
				font-weight: bold;
				z-index: 1;
				text-shadow: #333 0px 0px 2px;

			}
			.gaugeChartContainer {
				position: relative;
				font-size: 9px;
			}
			.gaugeChartTitle {
				display: inline-block;
				position: absolute;
				float: left;
				top: 0px;
				left: 0;
				width: 100%;
				text-align: center;
				color: #888;
				font-weight: bold;
				font-size: 12px;
			}

			.gaugeChartMin {
				display: inline-block;
				position: absolute;
				float: left;
				left: 0;
				bottom: 10%;
				width: 92%;
				margin-left: 8%;
				text-align: left;
				color: #888;
				font-weight: bold;
			}

			.gaugeChartMax {
				display: inline-block;
				position: absolute;
				float: left;
				left: 0;
				bottom: 10%;
				width: 95%;
				margin-right: 5%;
				text-align: right;
				color: #888;
				font-weight: bold;
			}
			td {
				margin: 5px;
				padding: 5px;
				text-align: center;
			}
			
			.ready-dialog 
			{
				width: 780px;
				text-align: left;
				
			}
			.ready-dialog p 
			{
				color: black;
				font-size: 12pt;
				
			}
			.ready-dialog code
			{
				font-size: 12pt;
				
			}
		</style>

		<script src="../js/gauge.min.js" type="text/javascript"></script>
		
	</head>
	<body>
		
	<div id="container">
		<div class="container-video">LOCAL
			<video id="local"></video>
		</div>
		<div class="container-video">REMOTE
			<video id="remote"></video>
		</div>
		<table>
			<tr>
				<td></td>
				<td>FPS/4</td>
				<td>FPS/2</td>
				<td>FPS</td>
			</tr>
			<tr>
				<td>320x240</td>
				<td><button data-sid="0" data-tid="0" class="mdl-button mdl-js-button mdl-button--raised">Layer S0 T0</button></td>
				<td><button data-sid="0" data-tid="1" class="mdl-button mdl-js-button mdl-button--raised">Layer S0 T1</button></td>
				<td><button data-sid="0" data-tid="2" class="mdl-button mdl-js-button mdl-button--raised">Layer S0 T2</button></td>
			</tr>
			<tr>
				<td>640x480</td>
				<td><button data-sid="1" data-tid="0" class="mdl-button mdl-js-button mdl-button--raised">Layer S1 T0</button></td>
				<td><button data-sid="1" data-tid="1" class="mdl-button mdl-js-button mdl-button--raised">Layer S1 T1</button></td>
				<td><button data-sid="1" data-tid="2" class="mdl-button mdl-js-button mdl-button--raised">Layer S1 T2</button></td>
			</tr>
			<tr>
				<td>1280x960</td>
				<td><button data-sid="2" data-tid="0" class="mdl-button mdl-js-button mdl-button--raised">Layer S2 T0</button></td>
				<td><button data-sid="2" data-tid="1" class="mdl-button mdl-js-button mdl-button--raised">Layer S2 T1</button></td>
				<td><button data-sid="2" data-tid="2" class="mdl-button mdl-js-button mdl-button--raised">Layer S2 T2</button></td>
			</tr>
		</table>	
		<div class="gaugeChartContainer">
			<canvas id="g_s_w" class="gaugeChart" width="192" height="135" style="width: 160px; height: 100px;"></canvas>
			<span id="s_s_w"class="gaugeChartLabel">- -</span>
			<span class="gaugeChartTitle">Sent Width</span>
			<span class="gaugeChartMin">0</span>
			<span class="gaugeChartMax"></span>
		</div>
		
		
		<div class="gaugeChartContainer">
			<canvas id="g_s_h" class="gaugeChart" width="192" height="135" style="width: 160px; height: 100px;"></canvas>
			<span id="s_s_h" class="gaugeChartLabel">- -</span>
			<span class="gaugeChartTitle">Sent Height</span>
			<span class="gaugeChartMin">0</span>
			<span class="gaugeChartMax"></span>
		</div>
		
		
		<div class="gaugeChartContainer">
			<canvas id="g_s_f" class="gaugeChart" width="192" height="135" style="width: 160px; height: 100px;"></canvas>
			<span id="s_s_f" class="gaugeChartLabel">- -</span>
			<span class="gaugeChartTitle">Sent FPS</span>
			<span class="gaugeChartMin">0</span>
			<span class="gaugeChartMax">30</span>
		</div>
		
		
		<div class="gaugeChartContainer">
			<canvas id="g_s_b" class="gaugeChart" width="192" height="135" style="width: 160px; height: 100px;"></canvas>
			<span id="s_s_b" class="gaugeChartLabel">- -</span>
			<span class="gaugeChartTitle">Sent kbps</span>
			<span class="gaugeChartMin">0</span>
			<span class="gaugeChartMax">2048</span>
		</div>
		
		
		<div class="gaugeChartContainer">
			<canvas id="r_s_w" class="gaugeChart" width="192" height="135" style="width: 160px; height: 100px;"></canvas>
			<span id="s_s_w" class="gaugeChartLabel">- -</span>
			<span class="gaugeChartTitle">Recv Width</span>
			<span class="gaugeChartMin">0</span>
			<span class="gaugeChartMax"></span>
		</div>
		<div class="gaugeChartContainer">
			<canvas id="r_s_h" class="gaugeChart" width="192" height="135" style="width: 160px; height: 100px;"></canvas>
			<span id="s_s_h" class="gaugeChartLabel">- -</span>
			<span class="gaugeChartTitle">Recv Heigth</span>
			<span class="gaugeChartMin">0</span>
			<span class="gaugeChartMax"></span>
		</div>
		<div class="gaugeChartContainer">
			<canvas id="r_s_f" class="gaugeChart" width="192" height="135" style="width: 160px; height: 100px;"></canvas>
			<span id="s_s_f" class="gaugeChartLabel">- -</span>
			<span class="gaugeChartTitle">Recv FPS</span>
			<span class="gaugeChartMin">0</span>
			<span class="gaugeChartMax">30</span>
		</div>
		<div class="gaugeChartContainer">
			<canvas id="r_s_b" class="gaugeChart" width="192" height="135" style="width: 160px; height: 100px;"></canvas>
			<span id="s_s_b" class="gaugeChartLabel">- -</span>
			<span class="gaugeChartTitle">Recv kbps</span>
			<span class="gaugeChartMin">0</span>
			<span class="gaugeChartMax">2048</span>
		</div>
	</div>
		<dialog class="ready-dialog mdl-dialog">
		<h4 class="mdl-dialog__title">Ready to test VP9 SVC layer selection?</h4>
		<div class="mdl-dialog__content">
			<p>
				This demo allows you to test the VP9 SVC layer selection which will be a key functionality of the <a href="https://github.com/medooze/sfu">Medooze SFU</a>.
			</p>
			<p>
				When SVC is enabled on latest Chrome version, it will send 3 different Temporal Layers and 2 Spatial layers. Chrome will send a single media stream to our SFU containing all SVC layers, and you will be able to select which layers the SFU send backs to you.
			</p>
			<p>
				By swithcing between the different layers you will be able to retrieve different sizes and fps from a single encoding, lowering the bandwith requirements without requiring extra processing power. 
			</p>
			<p>
				<b>Important:</b> This demo only works only works on Google Canary and you must enable VP9 SVC by running it with the following command line
			</p>
			<pre>
				<code>
 chrome.exe --force-fieldtrials=WebRTC-SupportVP9SVC/EnabledByFlag_2SL3TL	
				</code>
			</pre>
		</div>
		<div class="mdl-dialog__actions">
			<button type="button" class="ready mdl-button mdl-button mdl-button--raised  mdl-button--accent">Ready!</button>
		</div>
	</dialog>	
	</body>

</html>	

<script src="js/svc.js" type="text/javascript"></script>
